<template>
    <el-card>
        <div>
            <el-upload class="upload-demo" drag action="http://47.92.150.229:8000/api/upload" multiple :on-success="getMusicList">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    把文件拖到此处或 <em>点击上传</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        mp3格式小于20M
                    </div>
                </template>
            </el-upload>
        </div>
        <div style="display: flex; align-items: center; justify-content: center;margin-bottom: 10px;">
            <audio ref="audio" v-if="playMusicUrl" controls autoplay @ended="playNext" style="text-align: center;">
                <source :src="playMusicUrl" type="audio/ogg" />
            </audio>                
            <el-button round @click="playRandom" style="text-align: center; margin-left: 2px;">随机播放</el-button>
        </div>        
        <el-table v-loading="loading" :data="musicList" stripe style="width: 100%">
            <el-table-column prop="title" label="文件名" />
            <el-table-column prop="url" label="链接" />
            <el-table-column prop="file_size" label="文件容量(M)" />
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="playMusic(scope.$index)">播放</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

</template>
<script setup>
import { ref, reactive } from 'vue';
import { getMusic } from '../api/index';
import { ElMessage, ElMessageBox } from 'element-plus';
import { UploadFilled } from '@element-plus/icons-vue';

const loading = ref(true);
const musicList = ref();
const playMusicUrl = ref();
const currentPlayIndex = ref();
const isRandom = ref(false);
const getMusicList = async () => {
    const res = await getMusic();
    if (res.status === 2000) {
        musicList.value = res.data;
        loading.value = false;
    } else {
        ElMessage.error(res.message)
        loading.value = false;
    }
}
getMusicList();
const audio = ref();
const playMusic = (index) => {
    playMusicUrl.value = "http://47.92.150.229:9000/music/" + musicList.value[index]["url"];
    if (audio.value){
        audio.value.load()
        audio.value.play()        
    };
    currentPlayIndex.value = index;
}

// 随机播放
const playRandom = () =>{
    isRandom.value = true;
    let min = Math.ceil(0);
    let max = Math.floor(musicList.value.length);
    const randomNum = Math.floor(Math.random() * (max - min)) + min;
    playMusicUrl.value = "http://47.92.150.229:9000/music/" + musicList.value[randomNum]["url"];
    if (audio.value){
        audio.value.load()
        audio.value.play()        
    };
}

// 播放下一首
const playNext = () =>{
    if (isRandom.value){
        let min = Math.ceil(0);
        let max = Math.floor(musicList.value.length);
        const randomNum = Math.floor(Math.random() * (max - min)) + min;
        console.log(randomNum)
        playMusicUrl.value = "http://47.92.150.229:9000/music/" + musicList.value[randomNum]["url"];
    }else{
        playMusicUrl.value = "http://47.92.150.229:9000/music/" + musicList.value[currentPlayIndex.value + 1]["url"];
        console.log(playMusicUrl.value);
        currentPlayIndex.value += 1;        
    }
    if (audio.value){
        audio.value.load()
        audio.value.play()        
    };
}

</script>

<style scoped>

</style>